<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <!--  标题行    -->
      <el-row :gutter="20" style="margin: 0px -50px 0px 5px;">
        <el-col :span="21"><h1 class="my-heading">创建试题</h1></el-col>
        <el-col :span="1.5"><el-button @click="uploadSysFileSubmit">保存</el-button></el-col>
        <el-col :span="1.5"><el-button @click="goBack">返回</el-button></el-col>
      </el-row>
      <!--    条件行   -->
      <el-row v-show="showSearch" :gutter="24">

         <el-col :span="16">
           <el-card style="margin: 0 10px 20px 20px">
           <el-form :model="state.queryForm" ref="queryRef"  @keyup.enter="getDataList">
             <el-row :gutter="24">
               <el-col :span="11" class="mb20" >
                 <el-form-item label="题干" prop="stem" :rules="[{ required: true, message: '请输入题干',trigger: 'change',}]" >
                   <el-input placeholder="请输入题干" v-model="state.queryForm.stem" clearable   size="medium"/>
                 </el-form-item>
               </el-col>
               <el-col :span="6" class="mb20">
                 <el-form-item label="题型" prop="questionType" :rules="[{ required: true, message: '请选择题型',trigger: 'change',}]">
                   <el-select v-model="state.queryForm.questionType" placeholder="请选择题型" @change="handleChange" clearable>
                     <el-option :label="item.label" :value="item.value" v-for="(item, index) in tkgl_topic_type" :key="index"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="6" class="mb20">
                 <el-form-item label="难易程度" prop="questionType" :rules="[{ required: true, message: '请选择题难度',trigger: 'change',}]">
                   <el-input-number v-model="state.queryForm.difficulty" :min="1" :max="100"  />
                 </el-form-item>
               </el-col>
               <!-- 单选 -->
               <el-col :span="15" class="mb20"  v-if="state.queryForm.questionType == 'radio'">
                 <!--   A    -->
                 <div class="option">
                   <el-form-item label="A" prop="optionA" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                     <el-input placeholder="请输入" v-model="state.queryForm.optionA" clearable />
                   </el-form-item>
                   <el-form-item  prop="answer" class="answer">
                     <el-radio v-model="state.queryForm.answer" label="A">设为正确答案</el-radio>
                   </el-form-item>
                 </div>
                 <!--   B  -->
                 <div class="option">
                   <el-form-item label="B" prop="optionB" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                     <el-input placeholder="请输入" v-model="state.queryForm.optionB" clearable />
                   </el-form-item>
                   <el-form-item  prop="answer" class="answer">
                     <el-radio v-model="state.queryForm.answer" label="B">设为正确答案</el-radio>
                   </el-form-item>
                 </div>
                 <!--   C  -->
                 <div class="option">
                   <el-form-item label="C" prop="optionC" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                     <el-input placeholder="请输入" v-model="state.queryForm.optionC" clearable />
                   </el-form-item>
                   <el-form-item  prop="answer" class="answer">
                     <el-radio v-model="state.queryForm.answer" label="C">设为正确答案</el-radio>
                   </el-form-item>
                 </div>
                 <!--  D  -->
                 <div class="option">
                   <el-form-item label="D" prop="optionD" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                     <el-input placeholder="请输入" v-model="state.queryForm.optionD" clearable />
                   </el-form-item>
                   <el-form-item  prop="answer" class="answer">
                     <el-radio v-model="state.queryForm.answer" label="D">设为正确答案</el-radio>
                   </el-form-item>
                 </div>
               </el-col>
               <!-- 多选 -->
               <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType == 'multi'">
                 <!--   A    -->
                 <div class="option">
                   <el-form-item label="A" prop="optionA" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                     <el-input placeholder="请输入" v-model="state.queryForm.optionA" clearable />
                   </el-form-item>
                   <el-form-item  prop="answer" class="answer">
                     <el-checkbox v-model="answer" label="A" size="large">设为正确答案</el-checkbox>
                   </el-form-item>
                 </div>
                 <!--   B  -->
                 <div class="option">
                 <el-form-item label="B" prop="optionB" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                   <el-input placeholder="请输入" v-model="state.queryForm.optionB" clearable />
                 </el-form-item>
                 <el-form-item  prop="answer" class="answer">
                   <el-checkbox v-model="answer" label="B" size="large">设为正确答案</el-checkbox>
                 </el-form-item>
                 </div>
                 <!--   C  -->
                 <div class="option">
                 <el-form-item label="C" prop="optionC" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                   <el-input placeholder="请输入" v-model="state.queryForm.optionC" clearable />
                 </el-form-item>
                 <el-form-item  prop="answer" class="answer">
                   <el-checkbox v-model="answer" label="C" size="large">设为正确答案</el-checkbox>
                 </el-form-item>
                 </div>
                 <!--  D  -->
                 <div class="option">
                 <el-form-item label="D" prop="optionD" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                   <el-input placeholder="请输入" v-model="state.queryForm.optionD" clearable />
                 </el-form-item>
                 <el-form-item  prop="answer" class="answer">
                   <el-checkbox v-model="answer" label="D" size="large">设为正确答案</el-checkbox>
                 </el-form-item>
                 </div>
               </el-col>
               <!-- 填空 -->
               <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType == 'fill'">
                 <el-form-item label="答案" prop="answer" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                   <el-input placeholder="请输入答案" v-model="state.queryForm.answer" clearable />
                 </el-form-item>
               </el-col>
               <!-- 判断 -->
               <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType =='judge'">
                 <el-form-item  prop="answer" :rules="[{ required: true, message: '请判断',trigger: 'change',}]">
                   <el-radio-group v-model="state.queryForm.answer" class="ml-4">
                     <el-radio label="对" size="large">对</el-radio>
                     <el-radio label="错" size="large">错</el-radio>
                   </el-radio-group>
                 </el-form-item>
               </el-col>
               <!-- 简答 -->
               <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType == 'answer'" >
                 <el-form-item label="答案" prop="answer" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                   <el-input placeholder="请输入答案" v-model="state.queryForm.answer" clearable type="textarea" />
                 </el-form-item>
               </el-col>
               <el-col :span="20" class="mb20">
                 <el-text>选择关联资料</el-text>
<!--                 <el-button type="primary" text style="font-size: 15px;font-weight: bold">选择关联资料</el-button>-->
                 <el-form-item label="" prop="readouts">
                   <el-input  v-model="state.queryForm.readouts" style="margin: 10px 0" clearable maxlength="600" type="textarea"/>
                 </el-form-item>
                 <el-button type="primary" style="margin-left: 750px" @click="getAddQuestion">创建</el-button>
               </el-col>
             </el-row>
           </el-form>
           </el-card>
           <el-card style="margin: 0 10px 20px 20px">
             <el-text>添加试题</el-text>
             <div class="line"></div>
             <el-table :data="dataList" v-loading="dataListLoading" style="width: 100%">
               <el-table-column type="index" label="试题" width="180" />
               <el-table-column prop="stem" label="题干" width="180" />
               <el-table-column prop="questionType" label="题型" width="180" />
               <el-table-column prop="fileNameAll" label="关联资料" width="180" />
               <el-table-column prop="answer" label="答案" />
             </el-table>
             <div class="avue-crud__pagination">
               <el-pagination
                       @size-change="sizeChangeHandle"
                       @current-change="currentChangeHandle"
                       :current-page="pageIndex"
                       :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageSize"
                       :total="totalPage"
                       background
                       layout="total, sizes, prev, pager, next, jumper"
               >
               </el-pagination>
             </div>
           </el-card>
         </el-col>

        <el-col :span="8" class="mb" >
          <el-card style="margin: 0 10px 20px 0px">
            <el-input  v-model="state.queryForm.readouts" clearable maxlength="300" type="textarea" />
          </el-card>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts" name="systemKszlTestQuestion">
  //导入
  import { BasicTableProps, useTable } from "/@/hooks/table";
  import { useMessage, useMessageBox } from "/@/hooks/message";
  import { useDict } from '/@/hooks/dict';
  import {useRoute, useRouter} from 'vue-router';
  import { Session } from '/@/utils/storage';
  import type { UploadProps, UploadUserFile } from 'element-plus'
  import {ref} from "vue";
  import mittBus from '/@/utils/mitt';
  import {saveProfession} from "/@/api/train/kszlFile";
  import {addtkglQuestionList,fetchList,delObjs} from "/@/api/train/kszlTestQuestion";

  // 引入组件
  const FormDialog = defineAsyncComponent(() => import('./form.vue'));
  // 定义查询字典
  const { tkgl_topic_type } = useDict('tkgl_topic_type')
  //新增
  // 定义变量内容
  const formDialogRef = ref()
  // 搜索变量
  const queryRef = ref()
  const showSearch = ref(true)
  // 多选变量
  const selectObjs = ref([]) as any
  const multiple = ref(true)
  const answer = ref(['A'])
  //弹框显示
  const dialogVisible = ref(false)
  const centerDialogVisible = ref(false)
  const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {}
  })
  // 表单元素
  const dom = ref()
  const studyGroup = ref()
  // 校验规则
  const rules = ref({
    name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  })
  // 绑定数据
  const form = reactive({
    name: '',
    textarea:''
  })
  //接收参数
  const receivingList = reactive({})
  //新增弹框表单
  let keypointsform = reactive({
    keyId: "",
    zymcId: "",
    zydjId: "",
    keyPoint: "",
    remark: "",
    zymcName: "",
    zydjName: ""
  })
  //  table hook
  const {
    getDataList,
    sortChangeHandle,
    downBlobFile,
    tableStyle
  } = useTable(state)
  //返回上一页
  const router = useRouter();
  const goBack = () => {
    router.go(-1);
    // router.push('/train/tkglQuestionList/index');
  };
  const dataListLoading = ref(false);
  const dataList = ref<any[]>([]); // 根据你的数据结构来定义类型
  const totalPage = ref(0);
  const pageIndex = ref(1); // 假设第一页是1
  const pageSize = ref(10); // 假设每页显示10条数据
  const route = useRoute();
  //挂载完毕
  onMounted(()=>{
    Object.assign(receivingList,JSON.parse(route.query.queryForm))
    console.log(receivingList,state.queryForm) // 输出 "value1"
    getList()
  })
  const getAddQuestion = () =>{
    let arr = Object.assign({},receivingList,state.queryForm)
    console.log('receivingList--------',receivingList)
    arr.partOrgId = receivingList.studyGroupId
    arr.partPostId = receivingList.studyPostIds
    arr.zymcId = receivingList.majorNameId
    arr.keyId = receivingList.keyPointIds
    if(state.queryForm.questionType == 'multi')
    {
      arr.answer = answer.value.join('')
    }
    // console.log('--------',arr)
    addtkglQuestionList(arr).then((res)=>{
      console.log('res-----',res)
    })
    getList()
  }
const getList = async () =>{
  let id = receivingList.fileId
  console.log('receivingList.fileId',receivingList.fileId)
  dataListLoading.value = true;
  try {
    const response = await fetchList({
      fileId:id,
      current: pageIndex.value,
      size: pageSize.value
    });
    dataList.value = response.data.records;
    totalPage.value = response.data.total;
  } catch (error) {
    console.error('Error fetching data:', error);
    // 在这里处理错误，例如显示错误消息给用户
  } finally {
    dataListLoading.value = false;
  }
}
  // 每页数
  const  sizeChangeHandle = (val:number)=> {
    pageSize.value = val
    pageIndex.value = 1
    getList()
  }
  // 当前页
  const  currentChangeHandle =(val:number)=> {
    pageIndex.value = val
    getList()
  }

  // 清空搜索条件
  const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    // 清空多选
    selectObjs.value = []
    getDataList()
  }
  // 多选事件
  const selectionChangHandle = (objs: { id: string }[]) => {
    selectObjs.value = objs.map(({ id }) => id);
    multiple.value = !objs.length;
  };
  // 删除操作
  const handleDelete = async (ids: string[]) => {
    try {
      await useMessageBox().confirm('此操作将永久删除');
    } catch {
      return;
    }

    try {
      await delObjs(ids);
      getDataList();
      useMessage().success('删除成功');
    } catch (err: any) {
      useMessage().error(err.msg);
    }
  };
</script>
<style lang="scss" scoped>
  .my-heading {
    color: black;
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 10px;
  }
  .el-form{
    margin-left: 15px;
  }
  .option{
    display: flex;
  }
  .answer{
    margin: -15px 0 0 30px
  }
  .line{
    border-top: 1px dashed #817B7B;
    width: 1000px;
    height: 0;
    margin-top: 10px;
    margin-left: -5px
  }
</style>
